<div class="container properDiv form-font-size">
  <form [formGroup]="formModel" (submit)="onRegister()">
    <div>
      <label>用户名:</label>
      <input type="text" formControlName="username" placeholder="请输入用户名">
      <div [hidden]="formModel.get('username').valid || formModel.get('username').untouched">
        <div [hidden]="!formModel.hasError('required','username')">
          <span>用户名不能为空!</span>
        </div>
        <div [hidden]="!formModel.hasError('maxlength','username')">
          <span>用户名不能大于六个字!</span>
        </div>
      </div>
    </div>
    <div formGroupName="passwords">
      <div>密 码：<input type="password" formControlName="password"></div>
      <!--特殊情况-->
      <div [hidden]="!formModel.hasError('minlength',['passwords','password'])">
        密码最少六位
      </div>
      <div>确认密码：<input type="password" formControlName="confirm"></div>
      <div [hidden]="formModel.get('passwords','confirm').untouched">
        <div [hidden]="!formModel.hasError('equal','passwords')">
          {{formModel.getError('equal','passwords')?.msg}}
        </div>
      </div>

    </div>
    <div>
      <label>电话号码:</label>
      <input type="text" formControlName="phoneNumber" placeholder="请输入电话号码">
      <div [hidden]="formModel.get('phoneNumber').valid || formModel.get('phoneNumber').pristine">
        <div [hidden]="!formModel.hasError('phone','phoneNumber')">
          请输入正确的手机格式。
        </div>
      </div>
    </div>
    <div>
      <label>住 址:</label>
      <input type="text" formControlName="address" placeholder="请输入家庭住址">
      <div [hidden]="formModel.get('address').valid || formModel.get('address').pristine">
          <div [hidden]="!formModel.hasError('required','address')">
            地址不能为空
          </div>
      </div>
    </div>
    <div>
      <span>{{message}}</span>
    </div>
    <div>
      <input type="submit" value="注册">
    </div>
  </form>
</div>
